<div class="workflowHook pointing" nz-popover nzPopoverTrigger="click" nzPopoverPlacement="right"
     [nzPopoverContent]="popupHook" [(nzPopoverVisible)]="menuVisible">
    <ng-container *ngIf="hookEvent && hookEvent.parent_workflow && !hookEvent.parent_workflow.name">
        <ng-container *ngIf="icon === 'bitbucket'">
            <ng-container *ngIf="hookEvent.uuid !== hook.uuid">
                <app-bitbucket-icon *ngIf="icon === 'bitbucket'"></app-bitbucket-icon>
            </ng-container>
            <ng-container *ngIf="hookEvent.uuid === hook.uuid">
                <app-bitbucket-icon-success *ngIf="icon === 'bitbucket'"></app-bitbucket-icon-success>
            </ng-container>
        </ng-container>
        <ng-container *ngIf="icon !== 'bitbucket'">
            <i nz-icon nzType="{{icon | lowercase }}" nzTheme="outline" [class.green]="hookEvent.uuid === hook.uuid"></i>
        </ng-container>
    </ng-container>
    <ng-container *ngIf="hookEvent && hookEvent.parent_workflow && hookEvent.parent_workflow.name">
        <i nz-icon nzType="{{icon | lowercase }}" nzTheme="outline" [class.green]="hookEvent.uuid === hook.uuid"
           nz-tooltip nzTooltipTitle="{{hookEvent.parent_workflow.key}}/{{hookEvent.parent_workflow.name}} #{{hookEvent.parent_workflow.run}}"></i>
    </ng-container>
    <ng-container *ngIf="!hookEvent || !hookEvent.parent_workflow">
        <app-bitbucket-icon *ngIf="icon === 'bitbucket'"></app-bitbucket-icon>
        <i *ngIf="icon !== 'bitbucket'" nz-icon nzType="{{icon | lowercase}}" nzTheme="outline"></i>
    </ng-container>
</div>
<ng-template #popupHook>
    <app-workflow-menu-hook-edit (event)="receivedEvent($event)" [readonly]="isReadOnly" [workflow]="workflow" [hook]="hook" [hookEventUUID]="hookEvent?.uuid" #menuHook></app-workflow-menu-hook-edit>
</ng-template>
